<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<script type="text/javascript">
	$(document).ready(function() {
		$("#jMenu").jMenu({
			openClick : false,
			ulWidth : '220px',
			effects : {
				effectSpeedOpen : 200,
				effectSpeedClose : 200,
				effectTypeOpen : 'slide',
				effectTypeClose : 'slide',
				effectOpen : 'easeOutQuad',
				effectClose : 'linear'
			},
			TimeBeforeOpening : 100,
			TimeBeforeClosing : 100,
			animatedText : true,
			paddingLeft : 1
		});
		$("#aLogout").easyconfirm({
			locale : {
				width : 280,
				title : 'Confirmation',
				text : 'Do you want to logout ?'
			}
		});
		$(document).ajaxStart(function() {
			$.blockUI({
				message : '<img src="../images/icon_loading.gif" /><span> MRMS Loading... <span>',
				css : {
					border : 'solide',
					padding : '35px',
					backgroundColor : '#fff',
					'-webkit-border-radius' : '3px',
					'-moz-border-radius' : '3px',
					// opacity : .1,
					color : '#000'
				}
			});
		}).ajaxStop(function() {
			setTimeout(function() {
				$.unblockUI();
			}, 200);
		});

	});
</script>

<style>

.header-background {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

#background1 {
	background: url('../images/mrms_hdr_left.png') no-repeat 0 0;
	background-size: auto 150px;
}

#background2 {
	background: url('../images/mrms_hdr_right.png') no-repeat 100% 0;
	background-size: auto 150px;
	/*      z-index: -1; */
}

#cssmenu {
	/*      z-index: 99999999999; */
	
}

.wrapper {
	position: relative;
}

.right,.left {
/* 	width: 50%; */
	position: absolute;
	line-height: 34px;
}

.right , a {
	right: 0;
/* 	color : white; */
/* 	text-transform: uppercase; */
	cursor: pointer;
	font-size: 12px;
	right: 5px;
	
}

.left {
	left: 0;
}

</style>

<div id="header_container">
	<div id="header">
	
  	<div id="confirm" class="confirm" title="xxxxx" hidden="">
    </div>
    
		<div style=" height: 150px;">
			<div class="header-background" id="background2"></div>
			<div class="header-background" id="background1"></div>
		</div>
		
		<!-- 		<div style="width: 100%; height: 180px;"> -->
		<!-- 	<div
				style="width: 100%; 
 				text-align: center; border: 0px #000 solid; 
				background-image: url('../images/mrms_header.jpg'); background-repeat: no-repeat; 
				background-position: center; background-size: 50%; 
			    width: 100%;
				height: 180px;"
				align="right">
			</div> -->
<!-- 		</div> -->


		<s:set var="userMng">${objUserRole.userGrant=='N' ? 'hide' : 'xxx'}</s:set>
		<s:set var="roomMng">${objUserRole.roomGrant=='N' ? 'hide' : 'xxx'}</s:set>
		<s:set var="restMng">${objUserRole.residentGrant=='N' ? 'hide' : 'xxx'}</s:set>
		
		<s:set var="userGrant">${objUserRole.userGrant!='RW' ? 'disabled' : '-'}</s:set>
		<s:set var="roomGrant">${objUserRole.roomGrant!='RW' ? 'disabled' : '-'}</s:set>
		<s:set var="residentGrant">${objUserRole.residentGrant!='RW' ? 'disabled' : '-'}</s:set>
		
		<script type="text/javascript">
			_COMMON.isUserHide = "${objUserRole.userGrant!='RW' ? 'disabled' : '-'}";
			_COMMON.isRoomHide = "${objUserRole.roomGrant!='RW' ? 'disabled' : '-'}";
			_COMMON.isRestHide = "${objUserRole.residentGrant!='RW' ? 'disabled' : '-'}";
		</script>
		
<%-- 		USER : [${objUserRole.userGrant}], ROOM  : [${objUserRole.roomGrant}], RESIDENT :[${objUserRole.residentGrant}] --%>
		
	<div class="wrapper">
			<div id="cssmenu" style="width: 100%; float: left;">
				<ul id="jMenu">

					<li class="${userMng}"><a><i class="fa fa-users fa-lg"></i>&nbsp;&nbsp;User
							Management</a>
						<ul>
							<li><a href="../user/USR001"><i
									class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;User
									Inquiry</a></li>
							<li><a href="../role/ROL001"><i
									class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;Role
									Inquiry</a></li>
							<!-- 						<li><a href="../pr/home"><i class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;Example Page</a></li> -->
						</ul></li>
					<li  class="${roomMng}"><a><i class="fa fa-building-o fa-lg"></i>&nbsp;&nbsp;Room
							Management</a>
						<ul>
							<!-- 						<li><a href="../room/RM001"><i class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;Access Card Inquiry</a></li> -->
							<li><a href="../room/RM001"><i
									class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;Car
									Card Inquiry</a></li>
<!-- 							<li><a href="../room/RM002"><i -->
<!-- 									class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;Car -->
<!-- 									Sticker Inquiry</a></li> -->
<!-- 							<li ><a href="../room/RM003"><i -->
<!-- 									class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;Complaint -->
<!-- 									Inquiry</a></li> -->
<!-- 							<li><a href="../room/RM004"><i -->
<!-- 									class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;Room -->
<!-- 									Concierge & Deposit Inquiry</a></li> -->
							<li><a href="../room/RM005"><i
									class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;Function
									Room Usage Inquiry</a></li>
<!-- 							<li><a href="../room/RM006"><i -->
<!-- 									class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;Key -->
<!-- 									Card Inquiry</a></li> -->
							<li><a href="../room/RM007"><i
									class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;Room
									Profile Inquiry</a></li>
							<li><a href="../room/RM008"><i
									class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;Service
									Request Inquiry</a></li>
<!-- 							<li><a href="../room/RM009"><i -->
<!-- 									class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;Warning -->
<!-- 									Letter Inquiry</a></li> -->

						</ul></li>
					<li class="${restMng}"><a><i class="fa fa-inbox fa-bullhorn fa-lg"></i>&nbsp;&nbsp;Announce
							Management</a>
						<ul>
							<li><a href="../announce/ANM001"><i
									class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;Mailing
									List Inquiry</a></li>
						</ul></li>

					<li><a href="../logout" id="aLogout"><i
							class="fa fa-sign-out fa-lg"></i>&nbsp;&nbsp;Logout</a></li>
				</ul>

			</div>
			<div class="right">
				<a href="?language=th" class="navcontent"><img
					src="../images/flag-th.png" width="25" ${language != 'th'? 'style="opacity: 0.5;"':''}></a> &nbsp;
				<a href="?language=en"  class="navcontent"><img
					src="../images/flag-en.png" width="25" ${language == 'th'? 'style="opacity: 0.5;"':''}> </a> &nbsp;
			</div>
			<!-- 			<div class="right"><a href="../logout" >&nbsp;TH</a> / <a href="../logout" >&nbsp;EN</a> </div> -->
		</div>
	</div>
</div>